<template>
	
	<view>
		
		<view class="content">
			
			
			<view class="c-item">
				<view class="ci-title">训练对比</view>
				<view class="sep"></view>
				<view class="ci-content">
					<view class="ci-before">
						<view v-if="show_before_upbtn" @tap="upload('before')">
							<view class="btn-upload iconfont iconupload"></view>
							<view class="btn-upload-tips">上传图片</view>
						</view>
						<image v-if="show_before_upimg" @tap="upload('before')" :src="before_img" class="img-before"></image>
					</view>
					<view class="ci-after">
						<view v-if="show_after_upbtn" @tap="upload('after')">
							<view class="btn-upload iconfont iconupload"></view>
							<view class="btn-upload-tips">上传图片</view>
						</view>
						<image v-if="show_after_upimg" @tap="upload('before')" :src="after_img"  class="img-after"></image>
					</view>
				</view>
			</view>

			<view class="op">
				<button class="btn-back" @tap="save()">保存</button>
				<button class="btn-back" @tap="back()">返回</button>
			</view>
			
			
			<uni-file-picker class="file-picker" ref="file_picker" v-model="imageValue" limit="1" file-extname="png,jpg,jpeg"
				file-mediatype="all" title="选择图片文件" @select="select" @progress="progress"
				@success="success" @fail="fail"></uni-file-picker>
			
		</view>
		
	</view>
	
</template>

<script>
	
	var app = getApp();
	
	export default{
		data(){
			return {
				imageValue:[],
				show_before_upbtn:true,
				show_before_upimg:false,
				before_img:'',
				after_img:'',
				show_after_upbtn:true,
				show_after_upimg:false,
				upload_type:'before',
				cmp_text:'',
				worker_id:0
			}
		},
		onLoad(option) {
			let that = this;
			option = option || {};
			that.worker_id = option.worker_id ? option.worker_id : 0;
			that.get_orderplan();
			//that.get_cmp();
		},
		methods:{
			get_orderplan(){
				let that = this;
				app.post('ApiYuyueOrder/get_yuyue_plan',{worker_id:that.worker_id},(resp)=>{
					if(resp.status == 200){
						var data = resp.msg;
						that.cmp_text = data.cmp_text;
					}
				});
			},
			back(){
				uni.navigateTo({
					url:'/pages/my/yuyue'
				})
			},
			upload(type){
				let that = this;
				console.log(that.$refs.file_picker);
				that.upload_type = type;
				that.$refs.file_picker.chooseFiles();
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},
			
			// 上传成功
			success(e) {
				console.log('上传成功')
			},
			
			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			},
			save(){
				let that = this;
				app.post('ApiMy/save_cmp', {
					before_img: that.before_img,
					after_img: that.after_img
				}, function(res) {
					
					if(res.status == 200){
						app.alert('已保存',()=>{
							that.get_cmp();
						});
					}else{
						app.alert('保存失败');
					}
					
				})
			},
			get_cmp(){
				let that = this;
				app.get('ApiMy/get_cmp', {}, function(res) {
					
					console.log(res)
					if(res.status == 200){
						var data = res.msg;
						console.log(data.length)
						if(data.before_img){
							that.before_img = app.globalData.pre_url+data.before_img;
							console.log(that.before_img);
							that.show_before_upbtn = false;
							that.show_before_upimg = true;
						}
						
						if(data.after_img){
							that.after_img = app.globalData.pre_url+data.after_img;
							that.show_after_upbtn = false;
							that.show_after_upimg = true;
						}
					}
				})
			},
			select(e) {
				let that=this;
				app.showLoading('上传中');
				uni.uploadFile({
					url: app.globalData.baseurl + 'ApiImageupload/uploadImg/aid/' + app
						.globalData.aid + '/platform/' + app.globalData.platform +
						'/session_id/' +
						app.globalData.session_id,
					filePath: e.tempFilePaths[0],
					name: 'file',
					success: function(res) {
						app.showLoading(false);
						console.log(res);
						if (typeof res.data == 'string') {
							//兼容微信小程序
							var data = JSON.parse(res.data);
						} else {
							//兼容百度小程序
							var data = res.data;
						}
						
						if(data.status == 1){
							
							if(that.upload_type == 'before'){
								that.show_before_upbtn = false;
								that.show_before_upimg = true;
								that.before_img = data.url;
							}else{
								that.show_after_upbtn = false;
								that.show_after_upimg = true;
								that.after_img = data.url;
							}
							
						}else {
							app.alert(data.msg)
						}
					},
					fail: function(res) {
						app.showLoading(false);
						app.alert(res.errMsg);
					}
				});

			}
		}
	}
	
</script>

<style>
	
	
	.content{
		height: auto;
	}
	
	.c-item{
		display: flex;
		flex-direction: column;
		padding: 0.5rem;
		margin-bottom: 1rem;
	}
	
	.sep{
		height: 0.01rem;
		background-color: #b4b4b4;
		width: 100%;
		margin-bottom: 0.25rem;
	}
	
	.ci-content{
		height: 15rem;
		width: 100%;
		display: flex;
		flex-direction: row;
		margin-top: 3rem;
	}
	
	.btn-upload{
		font-size: 6rem;
		color: #b4b4b4;
		text-align: center;
		padding-top: 3rem;
	}
	
	.btn-upload-tips{
		color: #b4b4b4;
		text-align: center;
		margin-top: 3rem;
	}
	
	.ci-before,
	.ci-after{
		width: 50%;
		flex-shrink: 0;
		border: 0.01rem solid #e5e5e5;
	}
	
	.img-before,
	.img-after{
		width: 100%;
	}
	

	
	.op{
		display: inline-block;
		width: 100%;
		margin-bottom: 3rem;
		margin-top: 3rem;
	}
	
	.btn-back{
		width: 4.5rem;
		text-align: center;
		background-color: #00aaff;
		color: white;
		height: 2.0rem;
		line-height: 2.0rem;
		margin-top: 0.35rem;
		border-radius: 0.25rem;
		margin-left: auto;
		margin-right: auto;
		
	}
	
	.file-picker{
		display: none;
	}
	
</style>